<template>
  <Header></Header>
  <Banner :isIndex="false" @changeCourse="changeCourse" :bannerList="banner_list" :courseList="course_list">

  </Banner>
  <div class="question-body">
    <div class="breadcrumb">
      <el-breadcrumb :separator-icon="'ArrowRightBold'">
        <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{courseName}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row :gutter="20">
      <el-col
          v-for="(item, index) in SubjectList.data"
          :key="item.id"
          :span="8"
          :offset="index > 0 ? item.length : 0"
      >
        <el-card @click="toAccount(item)" :body-style="{ padding: '0px',cursor:'pointer' }">
          <img
                  src="https://img.js.design/assets/img/62732f055330b343e715ae76.png"
                  class="image"
          />
          <div style="padding: 14px">
            <span>{{item.name}}</span>
            <div class="bottom">
              <time class="time"></time>
              <!--              <p text class="button">{{ item.validityPeriod }}</p>-->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <staticFooter></staticFooter>
</template>

<script>
  import staticFooter from "../../components/staticFooter";
import BreadCrumb from '@/components/BreadCrumb/index'
import Banner from "@/components/Banner";
import Header from "@/components/Header";
import {computed, markRaw, onMounted, reactive, ref, toRaw, toRefs, watchEffect} from "vue";
import {bannerList, courseList, subjectList} from "@/api/api";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

export default {
  name: "index",
  setup(){
    //当前课程
    let activeCourseId = ref(0)
    let courseName = ref('');
    activeCourseId = window.localStorage.getItem('activeCourse');

    //右侧搜索
    let search = ref('')
    let links = ref([])
    const createFilter = (queryString) => {
      return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    }
    let timeout = null;
    const querySearchAsync = (queryString, cb) => {
      const results = queryString
          ? links.value.filter(createFilter(queryString))
          : links.value

      clearTimeout(timeout)
      timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    }
    const handleSelect = (item) => {
      console.log(item)
    }
    const handleOpen = (key,keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key,keyPath) => {
      console.log(key, keyPath)
    }

    //banner图集合
    let banner_list = ref([])
    let getBannerList = () =>{
      bannerList({id:Number(window.localStorage.getItem('activeCourse')),type:2}).then(res =>{
        console.log('轮播图列表',res)
        banner_list.value = res.data
      })
    }
    getBannerList();

    //课程列表
    let course_list = reactive([]);
    const getCourseList = () =>{
      courseList().then(res =>{
        console.log('课程列表',res)
        course_list.push(...res.data)
        let accoutCourse = window.localStorage.getItem('activeCourse') ? window.localStorage.getItem('activeCourse') : course_list[0].courseID
        courseName.value = course_list.filter(item => item.courseID == activeCourseId)[0].name
        window.localStorage.setItem('activeCourse',accoutCourse);
      })
    }

    //科目列表
    let SubjectList = reactive({
      data:[]
    })
    let getSubjectList = (activeCourseID) =>{
      subjectList({courseID:activeCourseID}).then(res =>{
        SubjectList.data = res.data;
        console.log('科目列表',SubjectList)
      }).catch(err =>{
        ElMessage({type:'error',message:err.message})
      })
    }

    //切换当前课程
    let changeCourse = (params) =>{
      console.log('当前课程id',params.courseId)
      let courseId = params.courseId;
      courseName.value = course_list.filter(item => item.courseID == courseId)[0].name;
      getSubjectList(courseId);
      getBannerList();
    }

    //跳转详情传递科目id
    let router  = useRouter();
    console.log('routers',router)
    let toAccount = (subject) =>{
      console.log('跳转科目详情',subject);
      router.push({name:'AccountList',params:{subject_id:subject.id,subject_name:subject.name}})
    }
    onMounted(() =>{
      getCourseList();
      getSubjectList(window.localStorage.getItem('activeCourse'));
    })
    return{
      courseName,
      banner_list,
      links,
      createFilter,
      querySearchAsync,
      handleSelect,
      search,
      handleOpen,
      handleClose,
      getCourseList,
      course_list,
      toAccount,
      getBannerList,
      getSubjectList,
      changeCourse,
      SubjectList
    }
  },
  components:{
    Header,
    Banner,
    BreadCrumb,
    staticFooter
  }
}
</script>

<style scoped>
  .link{
    cursor: pointer;
  }
  .link :hover{
    color: #409eff;
  }
.question-body{
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 60px;
}
.question-body .breadcrumb{
  margin: 20px 0px;
}
.image{
  width: 100%;
}
</style>
